<template>
  <div ref="widget" class="copyright" :style="{ ...border, backgroundColor: style.backgroundColor }">
    <span v-html="config.text"></span>
  </div>
</template>

<script>
  import widgetResizeMixin from '@/mixins/widgetResizeMixin';
  import borderMixin from '@/mixins/borderMixin';

  export default {
    mixins: [widgetResizeMixin, borderMixin],

    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      }
    },

    watch: {
      'config.text': 'resize',
      'style.fontSize': 'resize',
      'config.bordered': 'resize',
      'style.borderWidth': 'resize'
    }
  };
</script>

<style lang="scss" scoped>
  .copyright {
    overflow: hidden;
    line-height: 1.2;
    text-align: justify;
    white-space: break-spaces;
    word-break: break-all;
  }
</style>
